import React from 'react';
import Input from 'shared/input';
import Axios from 'axios';
import { apiPrefix } from 'shared/api';
import { Select } from 'antd';
import QueryButton from '../QueryButton';

import './index.less';

const { Option } = Select;

class RosterInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      roster: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/dynamics`;
    Axios.get(api)
      .then((response) => {
        this.setState({ roster: response.data.data });
      });
  }
  handleOnchange=(value, key) => {
    this.props.onChange(value, key);
  }
  render() {
    const { roster } = this.state;
    const { queryMessage } = this.props;
    const dynamics = queryMessage.dynamics;
    return (
      <section className="rostre-input">
        {
        roster.map(value => (
          <div key={value.id}>
            {value.field_type === 'text' ?
              <div>
                <Input
                  value={dynamics[value.name] || ''}
                  inputKey={value.name}
                  label={value.name}
                  onChange={(val, key) => this.handleOnchange(val, key)}
                />
              </div>
            :
              <div>
                <span>{value.name}</span>
                <Select
                  style={{ width: 200, marginLeft: 20, marginTop: 20 }}
                  showSearch
                  value={dynamics[value.name] || ''}
                  placeholder={`请选择${value.name}`}
                  onChange={val => this.handleOnchange(val, value.name)}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
                >
                  {
              value.options.map((val, ind) => (
                <Option value={val.name} key={ind}>{val.name}</Option>
                ))
            }
                </Select>
              </div>}
          </div>
        ))
      }
        <div className="query-button">
          <QueryButton />
        </div>
      </section>
    );
  }
}

export default RosterInput;
